<template>
  <div>
    <div>
      <router-link to="/Car/List">
        <el-button type="info" size="mini" icon="el-icon-arrow-left">返回</el-button>
      </router-link>
    </div>
    <el-row>
      <el-col :span="24">
        <el-form :model="Edit" :rules="ListEdit" ref="EditForm" label-width="100px" label-position="top" :inline="true" size="small">
          <el-form-item label="类型" prop="TypeID">
            <el-select v-model="Edit.TypeID" style="width:727px">
              <el-option v-for="(item,index) in TypeList.Type" :key="index" :value="item.ID" :label="item.TypeName_CHS"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="车辆" prop="fk_Set">
            <el-select v-model="Edit.fk_Set" style="width:727px">
            <el-option v-for="(item,index) in TypeList.Set" :key="index" :value="item.pk_Set" :label="item.Title"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标题" prop="Title">
            <el-input placeholder v-model="Edit.Title"></el-input>
          </el-form-item>
          <el-form-item label="司机" prop="Driver">
            <el-input placeholder v-model="Edit.Driver"></el-input>
          </el-form-item>
          <el-form-item label="目的地" prop="Destination">
            <el-input placeholder v-model="Edit.Destination"></el-input>
          </el-form-item>
          <el-form-item label="出发前里程" prop="Mileage">
            <el-input placeholder v-model="Edit.Mileage"></el-input>
          </el-form-item>
          <el-form-item label="开始时间" prop="StartDate">
            <template>
              <el-date-picker v-model="Edit.StartDate" type="datetime" placeholder="选择日期时间" style="width:727px">
              </el-date-picker>
              </template>
          </el-form-item>
          <el-form-item label="结束时间" prop="EndDate">
            <template>
              <el-date-picker v-model="Edit.EndDate" type="datetime" placeholder="选择日期时间" style="width:727px"></el-date-picker>
              </template>
          </el-form-item>
          <el-form-item label="用车原因" prop="Description">
              <el-input type="textarea" v-model="Edit.Description" :rows="5"></el-input>
          </el-form-item>
          <el-form-item label="接收" v-show="false">
                <el-input v-model="UserFullNameData" :disabled="true" ref="SelFullName">
                  <template slot="suffix">
                    <div>
                      <el-button size="mini" type="success" @click="AddUserDialogVisible = true">新增</el-button>
                    </div>
                  </template>
                </el-input>
                <!-- 弹出层，添加接收人 -->
                <el-dialog :lock-scroll="false" :visible.sync="AddUserDialogVisible" @open="DialogShow">
                  <div>
                    <div class="DialogDiv"></div>
                    <div>
                      <!-- <el-button v-show="false" type="success" @click="AdditionalUserClick" icon="el-icon-plus"
                        size="mini">追加接收人
                      </el-button> -->
                      <div style="float:left;padding-left:10px;line-height:30px;padding-top:8px">
                        <h4>指定接收人</h4>
                      </div>
                      <div style="float: right;padding-top:8px">
                        <el-input size="mini" v-model="UserSelect" placeholder="查找...">
                          <el-button slot="append" @click="UserSelectList" icon="el-icon-search" style="width:50px;">
                          </el-button>
                        </el-input>
                      </div>
                    </div>
                    <!-- 用户表格 -->
                    <el-table ref="EditTable" :data="UserData.UserList" @select="CangeCheck" @select-all="CheckALL">
                      <el-table-column type="selection" label="选择" width="50px">
                      </el-table-column>
                      <el-table-column property="DepartmentName" label="部门" width="100px"></el-table-column>
                      <el-table-column property="Address1" label="地址" width="300px"></el-table-column>
                      <el-table-column property="FullName" label="真实姓名" width="120px"></el-table-column>
                      <el-table-column property="UserName" label="用户名" width="120px"></el-table-column>
                      <el-table-column property="RoleName_CHS" label="角色" width="100px"></el-table-column>
                      <el-table-column property="Phone1" label="电话" width="170px"></el-table-column>
                    </el-table>
                    <!-- 分页 -->
                    <div class="foot_page">
                      <el-pagination background layout="prev, pager, next" @current-change="DialogShow(1)"
                        :total="UserData.Count" :current-page.sync="page" :page-size="3">
                      </el-pagination>
                    </div>
                  </div>
                </el-dialog>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div>
          <el-button @click="submit('EditForm')" type="primary" size="mini" icon="el-icon-check">确定</el-button>
          <el-button type="info" size="mini" @click="$router.go(-1)" icon="el-icon-close">取消</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<style  lang="scss" scoped>
.el-row {
  margin-bottom: 10px;
}
.el-form-item {
  width: 49%;
}
.dialogTop {
  border: 1px solid #f4f4f4;
  border-top: 3px solid #d2d6de;
  border-bottom-color: white;
  //头部按钮
  .title_div {
    padding: 5px;
    height: 32px;
    border-bottom: 1px solid #f4f4f4;
  }
  //底部分页
  .foot_page {
    padding: 5px;
    text-align: center;
  }
}
</style>
<script>
export default {
  data() {
    return {
      Edit: {
        TypeID:"",
        fk_Set:"",
        Title:"",
        Driver:"",
        Destination:"",
        Mileage:"",
        StartDate:"",
        EndDate:"",
        Description:""
      },
      Type:"Add",
      TypeList:{},
      SelName:"",
      dialogDesc: false,//弹出层
      //el-dialog的状态
      AddUserDialogVisible: false,
      //页数
      page: 1,
      //接收人用户数据
      UserData: {},
      //加载接收人文本框
      UserList: [],//已选接收人集合
      UserSelect: '',
      UserFullNameData: '',
      AuditInfo:{},
      ListEdit:{
        TypeID:[
          {required:true,message:'请输入内容',trigger:'blur'}
       ],
       fk_Set:[
          {required:true,message:'请输入内容',trigger:'blur'}
       ],
       Title:[
          {required:true,message:'请输入内容',trigger:'blur'}
       ],
       Driver:[
          {required:true,message:'请输入内容',trigger:'blur'}
       ],
       Destination:[
          {min:1,max:100,message:"长度在1到100之间"}
       ],
       Mileage:[
          {required:true,message:'请输入内容',trigger:'blur'}
       ],
       StartDate:[
          {required:true,message:'请输入内容',trigger:'blur'}
       ],
       EndDate:[
          {required:true,message:'请输入内容',trigger:'blur'}
       ],
       Description:[
          {required:true,message:'请输入内容',trigger:'blur'}
       ],

      }
    };
  },
  methods: {
      
      DialogOpen(){ 
        then.DialogGetdt();
      },
      DialogGetdt(){
        this.$$axios({
          url:"/HrApi/Car/GetUserList",
          method:"Get",
          params:{
            SelName:this.SelName,
            limit:4,
            Title:this.SelName
          }.then(res=>{
            if (!res.data.code) {
          this.AuditInfo = res.data.data
          if (this.AuditSelectList.length) {
            //已选中集合不为空则绑定在表格上面
            let SelFullName = this.AuditSelectList.map(n => n.pk_User).toString()
            this.$nextTick(() => {
              this.AuditInfo.AuditList.forEach(item => {
                if (SelFullName.indexOf(item.pk_User) != -1) {
                  //如果存在，则勾选行
                  this.$refs.AuditTable.toggleRowSelection(item);
                }
              })
            })

          }
        }
          })
        })
      },
      //查询接收人
    UserListData () {
      this.$axios({
        url: '/HrApi/TaskMange/UserList',
        method: 'GET',
        params: {
          page: this.page,
          limit: 5,
        }
      }).then(res => {
        this.UserData = res.data.data;

      })
    },
    //根据姓名查找数据
    UserSelectList () {
      if (this.UserSelect.length != 0) {
        this.$axios({
          url: '/HrApi/TaskMange/UserSelectList',
          method: 'GET',
          params: {
            page: this.page,
            limit: 5,
            UserSelect: this.UserSelect
          }
        }).then(res => {
          this.UserData = res.data.data;
        })
      }
      else {
        this.UserListData();
      }
    },
    CheckALL (val) {
      if (val.length) {
        val.forEach(r => {
          if (this.UserList.map(n => n.pk_User).indexOf(r.pk_User) === -1) {
            this.UserList.push(r)
          }
        })
      } else {
        this.UserList = []
      }


      //选中后给input重新赋值
      this.$refs.SelFullName.$el.childNodes[1].value = this.UserList.map(n => n.FullName)
    },
    CangeCheck (val, r) {
      if (this.UserList.map(n => n.pk_User).indexOf(r.pk_User) != -1) {
        this.UserList.splice(this.UserList.indexOf(r), 1)
      } else {
        this.UserList.push(r)
      }
      //选中后给input重新赋值
      this.$refs.SelFullName.$el.childNodes[1].value = this.UserList.map(n => n.FullName)
    },
    //追加接收人
    AdditionalUserClick () {
      this.UserFullNameData = ""
      this.UserFullNameData += this.UserList.map(n => n.FullName).toString();
      //this.SelList = this.UserList.map(n => +n.pk_User)
      this.AddUserDialogVisible = false;
    },
    //弹窗显示、隐藏
    DialogShow () {
      this.$axios({
        url: '/HrApi/TaskMange/UserList',
        method: 'GET',
        params: {
          page: this.page,
          limit: 3,
        }
      }).then(res => {
        this.UserData = res.data.data;
        //判断是否已经有选择收件人
        if (this.UserList.length) {
          //进行绑定
          let SelFullName = this.UserList.map(n => n.pk_User).toString();
          this.$nextTick(() => {
            this.UserData.UserList.forEach(item => {
              if (SelFullName.indexOf(item.pk_User) != -1) {
                this.$refs.EditTable.toggleRowSelection(item, true)
              }
            })
          })
        }
      })
    },
      submit(EditForm){
      //表单验证
      this.$refs[EditForm].validate((valid) => {
        if (!valid) {
          return false;
        }
        let EditInfo=JSON.stringify(this.Edit)
        this.$axios({
          url: '/HrApi/Car/UpdateCarList',
          method: "POST",
          data:  this.$Qs.stringify({
            pk_User:this.$store.state.UserInfo.pk_User,
            MyInfo:EditInfo,
            Type: this.Type,
            UserSelect: this.UserSelect
          })
        }).then(res => {
          if (!res.data.code) {
            //添加成功，重置表单
            console.log(this.Edit)
            if(this.Type=="Add"){
            this.$refs[EditForm].resetFields();
            }
            this.$message.success(res.data.msg)
          } else {
            this.$message.error(res.data.msg)
          }
        })
      
      })
    },
     UserListData () {
      this.$axios({
        url: '/HrApi/TaskMange/UserList',
        method: 'GET',
        params: {
          page: this.page,
          limit: 5,
        }
      }).then(res => {
        this.UserData = res.data.data;

      })
    }
      
  },
  mounted(){
     this.$axios({
      url: '/HrApi/Car/GetCarListType',
      method: 'GET'
    }).then(res => {
      console.log(res.data)
      this.TypeList = res.data.data
    });
    //根据ID获取数据
    if(Object.keys(this.$route.query).length){
        this.Type = "Edit";
        this.$axios({
        url: "/HrApi/Car/GetUserInfo",
        method: "GET",
        params:{
          id: this.$route.query["id"]
        },
        }).then((res) => {
        if (!res.data.code) {
          this.Edit = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
      }
      }
     
};

</script>
